<template>
    <div class="inspection-detail">
        <a-modal width="1200px" :visible="visible" :title="modalOption.title" class="yuan-modal inspection-detail-modal"
            @cancel="modalOption.onCancel" :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">{{detailData.varietyName}}</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="批号" prop="1">
                                <span class="yuan-form-show">{{ detailData.detectionBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="入库时间" prop="2">
                                <span class="yuan-form-show">{{ detailData.enterStorageTime }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="入库类型" prop="3">
                                <span class="yuan-form-show">{{ enterStorageTypeObj[detailData.enterStorageType] ||'--' }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="数量" prop="4">
                                <span class="yuan-form-show">{{ detailData.num }}{{detailData.unit}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="状态" prop="5">
                                <span class="yuan-form-show">{{ detailData.detectionState===0?'未检测':'已检测' }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="上次报告日期" prop="6">
                                <span class="yuan-form-show">{{ detailData.reportTime }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="中药等级" prop="7">
                                <span class="yuan-form-show">{{ detailData.medicineClass }}</span>
                            </a-form-model-item>
                        </div>
                    </div>

                    <div class="form-panel">
                        <div class="form-panel-title">检测记录</div>
                        <div class="form-panel-box">
                            <a-table bordered :rowKey="getRowKey" :columns="columns" :data-source="detailData.detectionRecordS"
                                :pagination="false"></a-table>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button type="primary" @click="modalOption.onCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
        <a-modal width="80%" :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%;" :src="this.showDetectionReport" />
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
import Upload from "@/components/upload.vue";
import { h } from "vue";
@Component({
    name: "ProductAdd",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) rawType!: string;
    @Prop({ default: "" }) infoId!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
        this.modalOption.title = this.infoId ? "编辑检测" : "新增检测";
    }
    previewVisible = false;
    enterStorageTypeObj = {
        SY: "溯源入库",
        NSY: "非溯源入库",
        CG: "采购入库",
    };
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "reportTime",
            key: "reportTime",
            title: "报表日期",
        },
        {
            align: "center",
            dataIndex: "detectionOrganization",
            key: "detectionOrganization",
            title: "检测机构",
        },
        {
            align: "center",
            dataIndex: "detectionPrincipal",
            key: "detectionPrincipal",
            title: "检测负责人",
        },
        {
            align: "center",
            dataIndex: "executeStandard",
            key: "executeStandard",
            title: "检测依据",
        },
        {
            align: "center",
            dataIndex: "detectionResult",
            key: "detectionResult",
            title: "检测结果",
            customRender: (text: string, record: any, index: number) => {
                return h(
                    "div",
                    { class: record.detectionResult === 1 ? "c-success" : "c-danger" },
                    record.detectionResult === 1 ? "合格" : "不合格"
                );
            },
        },
        {
            align: "center",
            dataIndex: "detectionReport",
            key: "detectionReport",
            title: "检测报告",
            customRender: (text: string, record: any, index: number) => {
                return h("div", [
                    h(
                        "a-button",
                        {
                            props: { icon: "eye", type: "primary", size: "small" },
                            on: {
                                click: () => this.showImg(record),
                            },
                        },
                        "查看"
                    ),
                ]);
            },
        },
        {
            align: "center",
            dataIndex: "delete",
            key: "delete",
            title: "操作",
            customRender: (text: string, record: any, index: number) => {
                const deleteBtn = h(
                    "a-button",
                    {
                        props: { icon: "delete", type: "danger", size: "small" },
                        on: {
                            click: () => this.removeCheckRercord(record),
                        },
                    },
                    "删除"
                )
                const btns:any = []
                if(this.$utilCheckPermission(['testDetectionRemoveRecord'])) btns.push(deleteBtn)
                return btns
            },
        },
    ];
    
    async removeCheckRercord(item: any) {
        this.$confirm({
            title: '提示',
            content: '确定删除吗？',
            okText: "确定",
            okType: "danger",
            cancelText:"取消",
            onOk: async () => {
                try {
                    await nextApi.removeCheckRercord(item.id);
                    this.$message.success("删除成功");
                    this.getDetail();
                } catch (error:any) {
                    this.$message.error(error.message);
                }
            },
        });
    }
    getRowKey(item: any) {
        return item.id;
    }
    formLoading = false;
    modalOption = {
        title: "新增检测",
        onCancel: this.closeModal,
    };
    formData: any = {};
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    pageChange() {}
    handleCancel() {
        this.previewVisible = false;
    }
    showDetectionReport = "";
    showImg(item: any) {
        this.showDetectionReport = item.detectionReport;
        this.previewVisible = true;
    }
    detailData: any = {};
    async getDetail() {
        this.formLoading = true;
        try {
            const res = await nextApi.getCheckoutDetail({ id: this.infoId, rawType: this.rawType });
            this.detailData = { ...res.data };
        } finally {
            this.formLoading = false;
        }
    }
}
</script>
<style lang="scss">
.inspection-detail-modal {
}
</style>
